<template>
  <div class="dt-main-tabs-content">
    <!--dt-content-left可选-->
    <!-- <div class="dt-content-left">
      <PmComChatList @elTab="elTabChange" :id="query.rootProjectId" />
    </div> -->
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <div class="dt-head-title">
            <!-- <div class="dt-head-breadcrumb" v-if="isBreadcrumb">
              <i class="el-icon-arrow-left"></i>
              <span @click="goBack">返回</span>
              <em>|</em>
            </div> -->
            <el-select class="dt-switch-item" v-model="currentProjectId" placeholder="请选择项目" @change="changeProject" :title="currentProjectName">
              <el-option class="dt-switch-option" :title="item.projectName" v-for="item in projectList" :key="item.id"
                :label="getProjectName18(item.projectName)" :value="item.id + ''">
              </el-option>
            </el-select>
            <!-- <div v-if="elTab==='0-0'" class="dt-detail-title">编辑项目</div>
            <div v-else-if="elTab==='2-0'" class="dt-detail-title">编辑项目节点</div>
            <div v-else-if="elTab==='3-0'" class="dt-detail-title">项目管理资料</div> -->
          </div>
          <div class="dt-head-tabs">
            <el-tabs v-model="activeName" @tab-click="changeTab">
              <el-tab-pane label="项目详情" name="0"></el-tab-pane>
              <el-tab-pane label="组织架构" name="1"></el-tab-pane>
              <el-tab-pane label="项目节点" name="2"></el-tab-pane>
              <el-tab-pane label="项目资料" name="3"></el-tab-pane>
              <el-tab-pane label="项目任务" name="4"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="dt-head-right">
            <!-- <el-switch v-model="value" active-color="#2F54EB" inactive-color="#c0c4cc">
            </el-switch> -->
          </div>
        </div>
      </div>
      <div class="dt-content-inner-main">
        <div class="dt-content-left">
          <PmComChatList @elTab="elTabChange" :id="query.rootProjectId" />
        </div>
        <PmDetail v-if="elTab === '0'" ref="detail" />
        <PmEditPm v-if="elTab === '0-0'" @getProjectList="getProjectList" />
        <PmOrg v-if="elTab === '1'" ref="org" />
        <PmNode v-if="elTab === '2'" ref="node" />
        <PmEditNode v-if="elTab === '2-0'" />
        <PmData v-if="elTab === '3'" ref="data" />
        <PmDataDetail v-if="elTab === '3-0'" />
        <PmTask v-if="elTab === '4'" ref="task" />
        <PmChat v-if="elTab === '5'" ref="chat" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      secret_uid: this.$store.state.uid,
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      loading: { mounted: false },
      activeName: this.$tools.getQuery(this).elTab ? this.$tools.getQuery(this).elTab.split('-')[0] : '',
      projectList: [],
      currentProjectId: '',
      currStep: -1
    }
  },
  computed: {
    tabs() {
      return this.$tools.getTabs(this, this.secret_uid)
    },
    elTab() {
      return this.$tools.getQuery(this).elTab || '0'
    },
    query() {
      return this.$tools.getQuery(this)
    },
    rootProjectId() {
      return this.$tools.getQuery(this).rootProjectId
    },
    isBreadcrumb() {
      return this.elTab.length === 3
    },
    currentProjectName() {
      var items = this.projectList.filter((item) => {
        return item.id == this.currentProjectId
      })
      if (items && items[0]) {
        return items[0].projectName
      } else {
        return ''
      }
    }
  },
  methods: {
    getProjectName18(str) {
      return str.length > 18 ? str.substring(0, 18) + '...' : str
    },
    changeTab(tab, event) {
      var data = { elTab: tab.index, rootProjectId: this.query.rootProjectId }
      this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data), () => {
        //新手引导,跳转后等待dom加载完毕再进行回调
        if (this.currStep === 7) {
          var timer = setInterval(() => {
            if ($('.dt-org-self-root > .dt-org-add')[0]) {
              clearInterval(timer)
              this.$root.$emit('guide-to-8')
            }
          }, 50)
        } else if (this.currStep === 11) {
          var timer = setInterval(() => {
            if ($('.dt-node-item')[0]) {
              clearInterval(timer)
              this.$root.$emit('guide-to-12')
            }
          }, 50)
        } else if (this.currStep === 16) {
          var timer = setInterval(() => {
            if ($('.el-table__body')[0]) {
              clearInterval(timer)
              this.$root.$emit('guide-to-17')
            }
          }, 50)
        } else if (this.currStep === 18) {
          this.currStep = -1
          this.$root.$emit('guide-to-end')
        }
      })
    },
    elTabChange(elTab) {
      this.activeName = elTab.split('-')[0]
      //this.subActiveName = elTab.split('-')[1]
    },
    showCard() {
      this.dataCard.isShowCard = true
    },
    goBack() {
      switch (this.elTab) {
        case '0':
        case '1':
        case '2':
        case '3':
        case '4':
          this.$router.push('/main/#/pm?tab=list&elTab=0')
          break
        case '0-0':
          this.$router.push('/main/#/pm?tab=detail&elTab=0&rootProjectId=' + this.query.rootProjectId)
          break
        case '2-0':
          this.$router.push('/main/#/pm?tab=detail&elTab=2&rootProjectId=' + this.query.rootProjectId)
          break
        case '3-0':
          this.$router.push('/main/#/pm?tab=detail&elTab=3&rootProjectId=' + this.query.rootProjectId)
          break
      }
    },
    //获取项目列表
    getProjectList() {
      var data = [
          {
            userId: this.uid,
            state: 0,
            keywords: '',
            page: 1,
            pageSize: 999999
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectNameList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.projectList = data.data.items
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //更换项目
    changeProject(rootProjectId) {
      //切换不同项目重新请求数据
      if (rootProjectId != this.rootProjectId) {
        if (this.elTab == 0) {
          var data = { elTab: '0', rootProjectId: rootProjectId }
          this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
          //详情
        } else if (this.elTab == 1) {
          //组织架构
          var data = { elTab: '1', rootProjectId: rootProjectId }
          this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
        } else if (this.elTab == 2) {
          //项目节点
          var data = { elTab: '2', rootProjectId: rootProjectId }
          this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
        } else if (this.elTab == 3) {
          //项目资料
          var data = { elTab: '3', rootProjectId: rootProjectId }
          this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
        } else if (this.elTab == 4) {
          //项目任务
          var data = { elTab: '4', rootProjectId: rootProjectId }
          this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
        } else if (this.elTab == 5) {
          //项目聊天
          var data = { elTab: '5', rootProjectId: rootProjectId }
          this.$router.push('/main/#/pm?tab=detail&' + this.$qs.stringify(data))
        }
      }
    }
  },
  watch: {
    //路由hash变化 activeName重新赋值
    $route(to, from) {
      if (to.hash !== from.hash) {
        this.activeName = this.$tools.getQuery(this).elTab ? this.$tools.getQuery(this).elTab.split('-')[0] : ''
        this.getProjectList()
      }
    }
  },
  mounted() {
    this.getProjectList()
    setTimeout(() => {
      this.currentProjectId = this.$tools.getQuery(this).rootProjectId + ''
    }, 200)
    this.$root.$on('guide-to-7', () => {
      this.currStep = 7
    })
    this.$root.$on('guide-to-11', () => {
      this.currStep = 11
    })
    this.$root.$on('guide-to-16', () => {
      this.currStep = 16
    })
    this.$root.$on('guide-to-18', () => {
      this.currStep = 18
    })
    this.$root.$on('guide-to-close', () => {
      this.currStep = -1
    })
    this.$root.$on('guide-to-end', () => {
      this.currStep = -1
    })
  }
}
</script>
<style scoped>
.dt-detail-title {
  font-size: 16px;
  color: #1f1f1f;
  line-height: 50px;
}
.dt-head-right {
  width: 340px;
}
.dt-switch-item {
  font-size: 16px;
  width: 330px;
}
.dt-switch-option {
  width: 330px !important;
}
.dt-switch-item >>> .el-input__inner {
  margin-top: 8px;
  border: none;
  height: 36px;
  line-height: 36px;
  color: #1f1f1f;
  padding-left: 0;
  font-size: 16px;
}
.dt-switch-item >>> .el-input__suffix {
  top: -4px;
}
.dt-switch-item >>> .el-icon-arrow-up:before {
  font-size: 20px;
  content: '\e78f';
}
.dt-switch-item >>> .el-select__caret.is-reverse {
  transform: rotateZ(0deg) translateY(8px) !important;
}
.dt-head-title >>> .el-dropdown {
  cursor: pointer;
}
.dt-content-inner-main {
  display: flex;
  flex: 1;
  overflow: auto;
}
</style>
